<template>
  <div class="cld-menu">
    <NMenu v-model:value="activeKey" mode="horizontal" :options="menuOptions"/>
    <div>
      <span v-show="!userInfo||!userInfo.username" @click="handleShowSignIn">登录</span>
      <NDropdown
          placement="bottom-start"
          trigger="click"
          size="small"
          :options="options"
          :on-select="selectNDropdown"
      >
        <NAvatar :src="userInfo&&userInfo.avatar" v-show="userInfo&&userInfo.username" round :style="{
    }">
        </NAvatar>
      </NDropdown>
    </div>
    <NModal v-model:show="showSignIn">
      <Sign @ok="signInOk"/>
    </NModal>
  </div>
</template>

<script setup lang="ts">
import {Ref, ref} from "vue";
import type {MenuOption, DropdownOption} from 'naive-ui'
import {NMenu, NDropdown, NModal, NAvatar} from "naive-ui"
import Sign from "~/application/signin/signin.vue"
import userStore from "~/store/user";
import {storeToRefs} from "pinia"
import {useRouter, useRoute} from "vue-router"

const userStr = userStore()
const {userInfo} = storeToRefs(userStr)
const showSignIn = ref(false)
const router = useRouter()
// selectNDropdown 下拉菜单
const selectNDropdown = (key: string | number, option: DropdownOption) => {
  if (key === "profile") {
    router.push("/user/profile")
  }
}
const handleShowSignIn = () => {
  showSignIn.value = !showSignIn.value
}
const signInOk = () => {
  showSignIn.value = !showSignIn.value
}
const activeKey = ref("1")
const options = [
  {
    label: '个人中心',
    key: 'profile'
  },
  {
    label: '退出登录',
    key: 'logout'
  },
]
const menuOptions: Ref<MenuOption[]> = ref([
  {
    label: '主页',
    key: 'pinball-1973',
  },
  {
    label: '摄影拼图',
    key: 'pinball-1974',
  },
  {
    label: '社区',
    key: 'pinball-1975',
  },
  {
    label: '关于本项目',
    key: 'pinball-1976',
  },
])
</script>

<style scoped lang="scss">
.cld-menu {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>
